<template>
  <div class="icons">
    <ul class="icon">
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
      <li>
        <a href="#" title="景点·玩乐">
          <span class="local-nav-icon"></span>
          <span>景点·玩乐</span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeIcons",
};
</script>

<style lang="stylus" scoped>
.icon {
  display: flex;
  height: 5rem;
  margin: 3px 4px;
  border-radius: 8px;
  flex-wrap: wrap;
}

.icon li {
  flex: 20%;
  margin-top: 10px;
}

.icon a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.local-nav-icon {
  width: 32px;
  height: 32px;
  margin-top: 8px;
  background: pink;
  background: url('@/assets/styles/img/nav.png') no-repeat 0 0;
  background-size: 32px auto;
  margin-bottom: 6px;
}
</style>